---
title: Snackbar
description: Snackbars provide brief messages about app processes at the bottom of the screen.
docType: Demo
docGroup: Components
group: Feedback
alias: [Notification, Alert, Message, Toast]
hooks:
  [
    useToastManager,
    useAddToast,
    useRemoveToast,
    useToastQueue,
    useCurrentToastActions,
  ]
components:
  [
    Snackbar,
    DefaultToastRenderer,
    ToastManager,
    ToastManagerProvider,
    Toast,
    ToastActionButton,
    ToastCloseButton,
    ToastContent,
  ]
---

# Snackbar

Snackbars provide brief messages about app processes at the bottom of the
screen.

## Initialize Snackbar

An application should normally have a single `Snackbar` added near the root of
the application.

```diff
 import { CoreProviders } from "@react-md/core/CoreProviders";
+import { Snackbar } from "@react-md/core/snackbar/Snackbar";
 import rmdConfig from "./rmdConfig.jsx";


 return (
   <CoreProviders {...rmdConfig}>
     {children}
+    <Snackbar />
   </CoreProviders>
 );
```

## Simple Toast

Once the `Snackbar` component has been included in the application, toasts
can be added by using the `addToast` function. Simple messages can be created
by providing the `children` as the toast content.

The default behavior for toasts:

- Add a toast to the end of the queue
- Once a toast becomes visible, show it for 5 seconds
  - Pause the timeout if the user hovers the toast
  - Pause the timeout if the user blurs the window
- Hide the toast and display the next toast in the queue

```demo source="./SimpleToastExample.tsx"

```

### Multiple Lines

The `children` for the toast can also be any renderable element and span
multiple lines.

```demo source="./MultipleLinesToastExample.tsx"

```

### Toast Theme

The `Toast` supports all the theme colors by setting the `theme`.

```demo source="./ToastThemeExample.tsx"

```

### Custom Toast Visible Time

If the default duration of 5 seconds does not work for a specific toast, set the
`visibleTime` to a duration in milliseconds to wait before hiding the toast.

```demo source="./CustomToastVisibleTimeExample.tsx"

```

## Add a Close Button

If a toast should be able to be dismissed early, a close button can be added by
adding `closeButton: true` when creating the toast. The close button will
default to having an `aria-label="Close"` and using the
[close](/customization/icon-config#close) icon.

```demo source="./AddACloseButtonExample.tsx"

```

### Close Button Props

If custom props are required for the close button, provide `closeButtonProps`
instead.

```demo source="./CloseButtonPropsExample.tsx"

```

## Actionable Toasts

A toast can be updated to have an action button appear to the right of the
message by providing an `action` object. It should normally have a simple
`onClick` event handler and `children` to display in the button.

```demo source="./ActionableToastExample.tsx"

```

### Action and Close Button

Both an action and close button can be displayed together.

```demo source="./ActionAndCloseButtonExample.tsx"

```

### Require an action

If an action **must** be clicked to hide the toast, set the `visibleTime` to
`null`.

```demo source="./RequireAnActionExample.tsx"

```

### Custom Action Button

If the action is complex and requires additional behavior, provide an
`actionButton` instead.

```demo source="./CustomActionButtonExample.tsx"

```

### Stacked Toasts

If the action should be below the toast content instead of inline, enable the
`stacked` option when creating a toast.

```demo source="./StackedToastExample.tsx"

```

## Custom Toast Manager

If multiple `Snackbar` need to be mounted at the same time, create a new
`ToastManager` and wrap the React tree with the `ToastManagerProvider`. Now
toasts should be created by calling `manager.addToast` or the `addToast`
returned by `useAddToast`.

This example will give a quick example and show how the `Snackbar` can be
updated to have `toastDefaults`.

> !Info! Check out the [custom toast renderer example](#custom-toast-renderer)
> to see a real use case for the custom toast manager.

```demo source="./CustomToastManagerExample.tsx"

```

---

> !Success! The following demos and features do not require a custom
> `ToastManager` to work outside of this documentation site unless specifically
> stated.

## Preventing Duplicate Toasts

The default behavior allows multiple toasts with the same content to be added
into the queue because each toast gets a unique `toastId` generated by
[nanoid](https://github.com/ai/nanoid) when added into the queue. Since this
might not be ideal, toast timers can automatically restart if the same content
is added into the queue. Manually set the `toastId` when adding a toast to
enable this feature.

> !Info! Check out the [custom toast renderer example](#custom-toast-renderer)
> for another use case for manually setting the `toastId`.

```demo source="./PreventingDuplicateToastsExample.tsx"

```

## Multiple Visible Toasts

The `Snackbar` can be configured to display more than one toast at a time by
setting the `limit` prop.

```demo source="./MultipleVisibleToastsExample.tsx"

```

## Snackbar Position

Set the `position` prop on the `Snackbar` to update the position within the
viewport to one of the following: `"bottom"` (default), `"bottom-left"`,
`"bottom-right"`, `"top"`, `"top-left"`, or `"top-right"`.

```demo source="./SnackbarPositionExample.tsx"

```

## Toast Priority

The default toast queue priority is first-in-first-out so that new toasts are
always added to the end of the queue. However, there are cases where a new toast
needs to be shown immediately to the user since some event happened that causes
the application to no longer work. A few examples are losing internet connection
or API requests failing.

To change the insert order for a new toast, include the `priority` option which
can be set to one of the following:

- `"normal"` (default) - the toast will be added to the end of the queue
- `"next"` - the toast will be inserted next-in-line in the queue, waiting for
  the current visible toast to exit before being shown. If the toast does not
  support duplicates, the existing toast will be moved instead and merged with
  the toast.
- `"replace"` - if there is a currently visible toast, it will start the leave
  transition and display the newly added toast instead.
- `"immediate"` - the same behavior as `"replace"` except that if there was a
  currently visible toast, the toast will be shown again once the `"immediate"`
  toast is hidden.

This example will try to show this behavior while logging the current toast
queue.

```demo source="./ToastPriorityExample.tsx"

```

## Custom Toast Renderer

> !Warn! It is recommended to only look at this example for complex applications
> since it requires building most of the toast functionality manually and using
> some low-level components.

If the toasts in the application require additional business logic or a
combination of complex components, it is recommended to create a custom toast
renderer with an optional toast manager. Using both together is recommended
since it is possible to enforce only known toasts by creating a custom toast
manager and handle those specific toasts in the renderer.

This example will showcase how to create a toast system that:

- Enforces specific toast ids throughout the application
- Use specific themes, layouts, and timeouts based on the unique toast id
- Use the `DefaultToastRenderer` to implement rendering a toast will the normal
  visibility behavior
- Add custom toast content with the `ToastContent` component
- Add custom content in the toast based on specific `toastId`
- Modify the toast visibility behavior with
  `useCurrentToastActions` or `useRemoveToast` hooks

```demo source="./CustomToastRendererExample.tsx"

```
